@import '../../config/config.less';

//namespace
@css-prefix-btn:~"@{css-prefix}btn";
//  button group
//  default  horizontal
.button-group-base(@btnClassName) {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  > .@{btnClassName} {
    position: relative;
    float: left; // 关键点
    &:hover,
      //&:focus,
    &:active,
    &.active {
      z-index: 2;
    }
  }
  // 针对图标按钮
  & .@{btnClassName}-icon-only .@{css-prefix}icon {
    font-size: 14px;
    position: relative;
    top: 1px;
  }
  //  大图标按钮
  &-large .@{btnClassName}-icon-only .@{css-prefix}icon{
    font-size: 16px;
    top: 2px;
  }
  //小图标按钮
  &-small .@{btnClassName}-icon-only .@{css-prefix}icon{
    font-size: 12px;
    top: 0;
  }
  // 圆形按钮
  &-circle .@{btnClassName} {
    border-radius: @btn-circle-size;
  }
  // 大按钮
  &-large  > .@{btnClassName} {
      padding: @btn-padding-large ;
      font-size: @btn-font-size-large;
      border-radius: @btn-border-radius;
  }
  //// 圆形按钮 ,并且是大按钮
  &-large&-circle .@{btnClassName} {
    border-radius: @btn-circle-size-large;
  }
  // 小按钮
  &-small .@{btnClassName}{
    padding: @btn-padding-small ;
    font-size: @btn-font-size;
    border-radius: @btn-border-radius-small;

    > .@{css-prefix-iconfont} {
      font-size: @btn-font-size;
    }
  }

  // 圆形按钮 ,并且是下按钮
  &-small&-circle .@{btnClassName} {
    border-radius: @btn-circle-size-small;
  }

}
//  vertical
.button-group-vertical-base(@btnClassName) {
  display: inline-block;
  vertical-align: middle;
  > .@{btnClassName} {
    display: block;
    width: 100%;
    max-width: 100%;
    float: none;
  }
}

// Group
.btn-group(@btnClassName: @css-prefix-btn) {
  //  默认的样式
  .button-group-base(@btnClassName);

   .@{btnClassName} + .@{btnClassName},
   .@{btnClassName} + &,
   & + .@{btnClassName},
   & + & {
    margin-left: -1px;
  }

  .@{btnClassName}:not(:first-child):not(:last-child) {
    border-radius: 0;
  }

  //  按钮组（非垂直）下面的第一个按钮
  &:not(&-vertical) > .@{btnClassName}:first-child {
    margin-left: 0;
    //  非最后一个按钮
    &:not(:last-child) {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }
  }
  //  按钮组（非垂直）下面的最后一个按钮（非第一个按钮）
  &:not(&-vertical) > .@{btnClassName}:last-child:not(:first-child) {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }

  // 按钮组嵌套按钮组
  & > & {
    float: left;
  }

  // 按钮组嵌套按钮组（非第一个和最后一个）
  & > &:not(:first-child):not(:last-child) > .@{btnClassName} {
    border-radius: 0;
  }
  // 按钮组嵌套按钮组（第一个但是非最后一个按钮组） 下面的最后一个按钮
  &:not(&-vertical) > &:first-child:not(:last-child) > .@{btnClassName}:last-child {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
      padding-right: 8px;
    }

  // 按钮组嵌套按钮组（最后一个但是非第一个按钮组）下面的第一个按钮
  &:not(&-vertical) > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    padding-left: 8px;
  }
}

// Group  vertical
.btn-group-vertical(@btnClassName: @css-prefix-btn) {
  //  vertical 的样式
  .button-group-vertical-base(@btnClassName);

  .@{btnClassName} + .@{btnClassName},
  .@{btnClassName} + &,
  & + .@{btnClassName},
  & + & {
    margin-top: -1px;
    margin-left: 0;
  }


  > .@{btnClassName}:first-child {
    margin-top: 0;
    &:not(:last-child) {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  > .@{btnClassName}:last-child:not(:first-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  & > &:first-child:not(:last-child) {
    > .@{btnClassName}:last-child {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      padding-bottom: 8px;
    }
  }

  & > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    padding-top: 8px;
  }
}
